<template>
  <div class="position-table">
    <div class="list-area">
      <el-row class="table-head-area" :gutter="5">
        <el-col :span="4" class="table-head"> <span>点位</span> </el-col>
        <el-col :span="2" class="table-head"> <span>类型</span> </el-col>
        <el-col :span="3" class="table-head"> <span>模型</span> </el-col>
        <el-col :span="3" class="table-head"> <span>编号</span> </el-col>
        <el-col :span="2" class="table-head"> <span>X</span> </el-col>
        <el-col :span="2" class="table-head"> <span>Y</span> </el-col>
        <el-col :span="2" class="table-head"> <span>W</span> </el-col>
        <el-col :span="2" class="table-head"> <span>H</span> </el-col>
        <el-col :span="2" class="table-head"> <span>Angle</span> </el-col>
        <el-col :span="2" class="table-head"> <span>操作</span> </el-col>
      </el-row>
      <div class="table-content" v-if="allObjects.length > 0">
        <div v-for="(obj, index) in allObjects" :key="index">
          <div class="item">
            <el-form
              ref="form"
              :model="obj"
              label-width="0px"
              label-position="left"
            >
              <el-row :gutter="5">
                <el-col :span="4">
                  <el-form-item label="">
                    <el-input
                      v-model="obj.text"
                      @input="updateObjText(obj)"
                      @keydown.native="handleKeyDown($event, index, 0)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="">
                    <el-select
                      :value="obj.type"
                      placeholder="请选择类型"
                      ref="itemSelect"
                      @change="handleSelectItemValue2(obj, $event)"
                      @keydown.native="handleKeyDown($event, index, 1)"
                      disabled
                    >
                      <el-option
                        v-for="item in positionType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="">
                    <el-select
                      :value="obj.imgtarget.modelId"
                      placeholder="请选择模型"
                      ref="itemSelect"
                      @change="handleSelectItemValue(obj, $event)"
                      @keydown.native="handleKeyDown($event, index, 2)"
                    >
                      <el-option
                        v-for="item in imgArr"
                        :key="item.modelId"
                        :label="item.modelName"
                        :value="item.modelId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="">
                    <el-input
                      v-model="obj.posNo"
                      @input="updateObjProperty(obj, 'posNo', $event)"
                      :disabled="obj.posId ? true : false"
                      @keydown.native="handleKeyDown($event, index, 3)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="">
                    <el-input
                      v-model.number="obj.x"
                      type="number"
                      @input="updateObjProperty(obj, 'x', $event)"
                      @keydown.native="handleKeyDown($event, index, 4)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="">
                    <el-input
                      v-model.number="obj.y"
                      type="number"
                      @input="updateObjProperty(obj, 'y', $event)"
                      @keydown.native="handleKeyDown($event, index, 5)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="">
                    <el-input
                      v-model.number="obj.width"
                      type="number"
                      @input="updateObjProperty(obj, 'w', $event)"
                      @keydown.native="handleKeyDown($event, index, 6)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="">
                    <el-input
                      v-model.number="obj.height"
                      type="number"
                      @input="updateObjProperty(obj, 'h', $event)"
                      @keydown.native="handleKeyDown($event, index, 7)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="">
                    <el-input
                      v-model.number="obj.angle"
                      type="number"
                      @input="updateObjProperty(obj, 'angle', $event)"
                      @keydown.native="handleKeyDown($event, index, 8)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="button-area">
                  <i class="el-icon-close" @click="deleteObject(index)" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <div class="empty-area" v-else>
        <span>暂无点位</span>
      </div>
    </div>
    <MessageBox
      ref="messageBox"
      :title="messageBoxtitle"
      :buttons="customButtons"
      @close="onmsgClose"
    />
  </div>
</template>

<script>
import MessageBox from "@/components/MessageBox/index.vue";
export default {
  name: "position-table",
  props: {
    allObjects: {
      type: Array,
      default: () => [],
    },
    positionType: {
      type: Array,
      default: () => [],
    },
    imgArr: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    MessageBox,
  },
  data() {
    return {
      messageBoxtitle: "",
      customButtons: [],
    };
  },
  methods: {
    onmsgClose() {
      console.log("确认框已关闭");
    },
    handleSelectItemValue2(item, value) {
      this.customButtons = [
        {
          text: "取消",
          action: () => this.$refs.messageBox.close(),
          type: "",
        },
        {
          text: "确定",
          action: () => {
            this.$refs.messageBox.close();
            this.$emit("handleSelectItemValue2", item, value);
          },
          type: "primary",
        },
      ];
      this.messageBoxtitle =
        "确定重新选择类型吗?此操作会让其丢失原来的类型属性";
      this.$refs.messageBox.open();
    },
    updateObjText(obj) {
      this.$emit("updateObjText", obj);
    },
    updateObjProperty(obj, property, value) {
      this.$emit("updateObjProperty", obj, property, value);
    },
    handleSelectItemValue(item, value) {
      this.$emit("handleSelectItemValue", item, value);
    },
    deleteObject(index) {
      this.$emit("deleteObject", index);
    },
    handleKeyDown(event, currentIndex, columnIndex) {
      if (event.key === "Tab" && !event.shiftKey) {
        const nextIndex = currentIndex + 1;
        if (nextIndex < this.allObjects.length) {
          const rows = this.$el.querySelectorAll(".item");
          const nextRow = rows[nextIndex];
          if (nextRow) {
            const inputs = nextRow.querySelectorAll(
              ".el-input__inner, .el-select .el-input__inner"
            );
            if (inputs.length > columnIndex) {
              const nextInput = inputs[columnIndex];
              if (nextInput) {
                setTimeout(() => {
                  nextInput.focus();
                  event.preventDefault();
                }, 0);
              }
            }
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
.position-table {
  width: 100%;
  z-index: 1000;
  background: #fff;
  .list-area {
    width: 100%;
    .table-head-area {
      margin-bottom: 10px;
      .table-head {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 18px;
          font-weight: bold;
          color: $themeColor;
        }
      }
    }
    .button-area {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-icon-close {
        cursor: pointer;
        color: #ff4d4f;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .table-content {
      width: 100%;
      max-height: 500px;
      overflow-y: auto;
      overflow-x: hidden;
      @include scrollBar2;
    }
    .empty-area {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 18px;
        font-weight: bold;
        color: $themeColor;
      }
    }
  }
}
</style>
